<template>
    <div class="nav fl">
        <div class="navInfo">
            <span><img src="../../assets/images/headerImg.png"></span>
            <font>类型：{{ type }}</font>
        </div>
        <div class="navList">
            <ul>
                <li v-for="(menu, item) in menus">
                    <div class="navTit navTitDown" @click="columnShow(menu)" v-if="item !== 2">
                        <span v-if="item === 0" class="glyphicon glyphicon-user fontLeft"></span>
                        <span v-else-if="item === 1" class="glyphicon glyphicon-file fontLeft"></span>
                        {{ menu.menuText }}
                        <span v-if="item !== 2" class="glyphicon glyphicon-menu-down fontRight"></span>
                    </div>
                    <div class="navTit navTitDown" @click="loginOut()" v-if="item === 2">
                        <span class="glyphicon glyphicon-share fontLeft"></span>
                        {{ menu.menuText }}
                    </div>
                    <div class="navListBox" v-show="menu.isShow">
                        <font v-for="secondMenu in menu.secondMenus">
                            <router-link :to="{ path: secondMenu.linkHref }" :class="{on: secondMenu.isChoose }">{{ secondMenu.secondMenuText }}</router-link>
                        </font>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Api from '../../api/api'
    const api = new Api();
    export default{
        data(){
            return {
                menus: [
                    {
                        menuText: '账户管理',
                        secondMenus: [
                            { linkHref: '/', secondMenuText: '账户管理', isChoose: false },
                            { linkHref: '/flowing', secondMenuText: '账户流水', isChoose: false }
                        ],
                        isShow: false
                    },
                    {
                        menuText: '个人资料',
                        secondMenus: [
                            { linkHref: '/information', secondMenuText: '个人信息', isChoose: false },
                            { linkHref: '/change', secondMenuText: '修改密码', isChoose: false }
                        ],
                        isShow: false
                    },
                    {
                        menuText: '退出登录'
                    }
                ],
                showColumn: '',
                type: ''
            }
        },
        created (){
            this.fetchData();
            let param = {
                token: sessionStorage.getItem('token')
            };
            api.getHeaderInfo(param).then(res=>{
                if(res.data.success){
                    if(res.data.data.financier.type===1){
                        this.type='个人'
                    }else{
                        this.type='公司'
                    }
                }else{
                    console.log(`左边栏目，个人信息接口请求失败！${res.data.cause}`)
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        watch:{
            '$route': 'fetchData'
        },
        methods:{
            columnShow(menu){
                menu.isShow = !menu.isShow
            },
            fetchData(){
                this.showColumn = this.$route.name;
                this.menus[0].isShow = true;
                let active1 = this.showColumn[0];
                let active2 = this.showColumn[1];
                this.menus.forEach((item,index)=>{
                    index!==active1?item.isShow = false:item.isShow = true
                });
                this.menus[active1].secondMenus.forEach((param,i)=>{
                    i!==active2?param.isChoose = false:param.isChoose = true
                })
            },
            loginOut(){
                let param={
                    token: sessionStorage.getItem('token')
                };
                api.loginOut(param).then(res=>{
                    if(res.data.success){
                        sessionStorage.removeItem('token')
                        this.$router.replace({ path: '/login'});
                    }else{
                        console.log(`登出接口请求失败！${res.data.cause}`)
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        }
    }
</script>